<!-- 理化检测任务单详情(生产型) -->
<template>
  <div class="dialog-container" id="dialog-container">
    <el-dialog v-dialogDrag :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'"
      append-to-body :close-on-click-modal="false" :visible.sync="dialogVisible" @close="$emit('update:show', false)"
      :before-close="handleClose" :show="show" width="800px">
      <div slot="title">
        <span style="color:white;">详情</span>
        <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;" @click="isFullScreen = !isFullScreen">
          <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
        </button>
      </div>
      <div style="overflow: hidden;">
        <img src="../../../../assets/images/sagw.png" style="float:left;">
        <h2 style="text-align:center;">理化检测任务单</h2>
      </div>
      <el-form :model="form" ref="form" :inline="true" label-width="130px" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件号：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="热处理炉号：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="任务类型：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="零件名称：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="批次零件总数量：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托方：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="零件图号：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="材料牌号：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="委托日期：" prop="orderid">
              <el-date-picker v-model="form.orderid" type="date" style="width: 200px;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图纸版本：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="材料炉号：" prop="orderid">
              <el-input v-model="form.orderid" disabled></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="委托单号：" prop="orderid">
              <el-input v-model="form.orderid"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="20">
            <el-form-item label="样品信息：" prop="orderid">
              <el-radio-group v-model="form.orderid">
                <el-radio label="1">实物<el-input v-model="form.orderid" disabled style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
                <el-radio label="2">试样<el-input v-model="form.orderid" disabled style="width: 70px;margin: 0 5px;"></el-input>件</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注：" prop="orderid">
              <el-input type="textarea" v-model="form.orderid" disabled style="width: 580px;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="任务单详情" name="first">
          <el-table :data="tableData">
            <el-table-column prop="num" label="编号" align="center" min-width="60"></el-table-column>
            <el-table-column prop="project" label="检测项目" align="center" min-width="100"></el-table-column>
            <el-table-column prop="location" label="检测位置" align="center" min-width="80"></el-table-column>
            <el-table-column prop="require" label="检测要求" align="center" min-width="130"></el-table-column>
            <el-table-column prop="mesaureData" label="实测数据" aligin="center">
              <el-table-column prop="data1" label="1" align="center" min-width="50"></el-table-column>
              <el-table-column prop="data2" label="2" align="center" min-width="50"></el-table-column>
              <el-table-column prop="data3" label="3" align="center" min-width="50"></el-table-column>
              <el-table-column prop="data4" label="4" align="center" min-width="50"></el-table-column>
              <el-table-column prop="data5" label="5" align="center" min-width="50"></el-table-column>
            </el-table-column>
            <el-table-column prop="eq" label="检测设备" align="center" min-width="150"></el-table-column>
            <el-table-column prop="remark" label="备注" align="center" min-width="72"></el-table-column>
            <el-table-column prop="operate" label="操作" fixed="right" align="center" min-width="90">
              <template slot-scope="scope">
                <div v-if="scope.row.parent == true">
                  <el-button @click="addClick(scope.row)" type="text" size="small">新增</el-button>
                  <el-button type="text" size="small">删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="操作记录" name="second">
          <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
            <el-table-column prop="date" label="时间" align="center" width="100"></el-table-column>
            <el-table-column prop="date" label="操作记录" align="center" width="100"></el-table-column>
            <el-table-column prop="date" label="操作角色" align="center" width="150"></el-table-column>
            <el-table-column label="用户名" align="center"></el-table-column>
            <el-table-column prop="date" label="操作结果" align="center" width="150"></el-table-column>
            <el-table-column prop="date" label="备注" align="center" width="72"></el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <add-table-data :show.sync="isShowAdd"></add-table-data>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import SelectPartNumber from '../select-part-number-button'; // 选择零件号
  import AddTableData from '../../common/add-table-data';
  export default {
    components: {
      'select-part-number-button': SelectPartNumber,
      'add-table-data': AddTableData
    },
    data() {
      return {
        isFullScreen: true,
        dialogVisible: this.show,
        activeName: 'first',
        form: {
          orderid: ''
        },
        isShowAdd: false,
        tableData: [{
            num: '一',
            project: '表面硬度',
            location: '',
            require: '',
            mesaureData: {
              data1: '',
            },
            eq: '',
            remark: '',
            parent: true
          },
          {
            num: '1',
            project: '维氏硬度1',
            location: '齿面',
            require: '75.5-82 HR30N',
            // mesaureData: {
            data1: '10',
            data2: '20',
            data3: '30',
            data4: '40',
            data5: '50',
            // },
            eq: '',
            remark: '',
            parent: false
          },
          {
            num: '二',
            project: '心部硬度',
            location: '',
            require: '',
            mesaureData: {
              data1: '',
            },
            eq: '',
            remark: '',
            parent: true
          },
          // {
          //   num: '1',
          //   project: '维氏硬度',
          //   location: '芯部',
          //   require: '>=64 HRA',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          {
            num: '三',
            project: '硬化层',
            location: '',
            require: '',
            mesaureData: {
              data1: '',
            },
            eq: '',
            remark: '',
            parent: true
          },
          // {
          //   num: '1',
          //   project: '有效硬化层1',
          //   location: '齿面',
          //   require: '（大齿）513HV1=0.55-0.8mm',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          {
            num: '四',
            project: '金相组织',
            location: '',
            require: '',
            mesaureData: {
              data1: '',
            },
            eq: '',
            remark: '',
            parent: true
          },

          // {
          //   num: '1',
          //   project: '碳化物',
          //   location: '齿面',
          //   require: '1-3级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },{
          //   num: '2',
          //   project: '碳化物',
          //   location: '齿脚',
          //   require: '1-3级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          // {
          //   num: '3',
          //   project: '残余奥氏体',
          //   location: '齿面',
          //   require: '1-5级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          // {
          //   num: '4',
          //   project: '残余奥氏体',
          //   location: '齿根',
          //   require: '1-5级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          // {
          //   num: '5',
          //   project: '针状马氏体',
          //   location: '齿面',
          //   require: '1-5级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
          // {
          //   num: '6',
          //   project: '针状马氏体',
          //   location: '齿根',
          //   require: '1-5级',
          //   mesaureData: {
          //     data1: '',
          //   },
          //   eq: '',
          //   remark: '',
          //   parent: false
          // },
        ]
      }
    },
    props: {
      show: {
        type: Boolean,
        default: false,
      }
    },
    watch: {
      show() {
        this.dialogVisible = this.show;
      }
    },
    methods: {
      handleClose() { /* 关闭的时候更新状态值 */
        this.isFullScreen = false;
        this.dialogVisible = false;
      },
      handleClick(tab, event) {
        // console.log(tab, event);
      },
      // 新增
      addClick(row) {
        this.isShowAdd = true;
      }
    }
  }

</script>
